<template>
  <el-dropdown @visible-change="onChange" @command="handleCommand">
    <div class="avatar-dropdown">
      <img class="user-avatar" :src="user.userInfo.avatarUrl || lcwPng" alt="" />
      <div class="user-name">{{ user.userInfo.name||"梁朝伟" }}</div>
      <el-icon class="up-down">
        <component :is="visible ? 'ArrowUp' : 'ArrowDown'" />
      </el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="logout">
          <svg-icon name="logout" size="16px" />
          <span @click="parseLogout()">退出登陆</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
  import { defineComponent, ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'

  import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { LOGIN_URL } from '@/config/config'
  /* 默认头像 */
  import lcwPng from '@/assets/images/lcw.png'
  /* 回显userStore中的用户信息 */
  import userStore from '@/store/modules/login/userStore'

  const visible = ref(false)
  function onChange(show: boolean) {
    visible.value = show
  }
  /* 获取用户信息 */
  let user=userStore();

  let router=useRouter();

  /**
   * 退出登陆,
   * 清空用户信息，并跳转至登陆页面
   */
  let parseLogout= ()=>{
    // 清空用户信息
    user.doLogout();
    // 并跳转至登陆页面
    router.push('/login');
  }
</script>

<style scoped lang="scss">
.avatar-dropdown {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: 50px;
  padding: 0;

  .user-avatar {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
  }

  .user-name {
    position: relative;
    margin: 0 6px;
    cursor: pointer;
  }
}
</style>
